<template>
  <div class="flow-track-chart">
    <div v-moveDirective:scroll class="flow-track-chart__drawer">
      <workflow-designer
        v-if="chart.activities"
        :style="`width:${chartWidth}px;height:${chartHeight}px`"
        :lineColor="'#666666'"
        :flowData="chart"
        :flowStatus="flowNodeStatus"
        :workflowStatus="workflowStatus"
        @onActivity="clickActivity"
      />
    </div>
    <div class="flow-track-chart__explain">
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__finish"></i>
        <span>{{ $t('cloudpivot.flow.pc.FinishNode') }}</span>
      </div>
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__processing"></i>
        <span>{{ $t('cloudpivot.flow.pc.ProcessNode') }}</span>
      </div>
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__wrong"></i>
        <span>{{ $t('cloudpivot.flow.pc.ExceptionNode') }}</span>
      </div>
      <div class="flow-track-chart__explain-item">
        <i class="flow-track-chart__default"></i>
        <span>{{ $t('cloudpivot.flow.pc.UnstartNode') }}</span>
      </div>
    </div>
    <div class="flow-track-chart__fullscreen">
      <a-tooltip placement="top" >
        <template slot="title">
          <span>{{ $t('cloudpivot.form.runtime.biz.fullScreen') }}</span>
        </template>
        <span @click="fullScreen" class="fullscreen icon aufontAll">&#xe8e5;</span>
      </a-tooltip>
    </div>
    <!-- 全屏查看流程图 -->
    <div class="chart__fullscreen" v-if="showFullScreen">
      <div class="fullscreen__head">
        <div class="fullscreen__head-left">{{ $t('cloudpivot.flow.pc.WorkflowChart') }}</div>
        <div class="fullscreen__head-right">
          <a-tooltip placement="bottom" >
            <template slot="title">
              <span>{{ $t('cloudpivot.flow.pc.SmallScreen') }}</span>
            </template>
            <span @click="restoreScreen" class="fullscreen-restore icon aufontAll">&#xe8e7;</span>
          </a-tooltip>
        </div>
      </div>
      <div v-moveDirective:scroll.full class="fullscreen__content">
        <workflow-designer
          v-if="chart.activities"
          :style="`width:${chartWidth}px;height:${chartHeight}px`"
          :lineColor="'#666666'"
          :flowData="chart"
          :flowStatus="flowNodeStatus"
          :workflowStatus="workflowStatus"
          @onActivity="clickActivity"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Component, Vue, Prop
} from 'vue-property-decorator';
import { Tooltip } from 'h3-antd-vue';

import flowDrawer from '@cloudpivot/flow-drawer';
import common from '@cloudpivot/common';

import { workflow } from '@cloudpivot/api';

@Component({
  name: 'flow-track-chart',
  directives: {
    moveDirective: common.directives.moveDirective
  },
  components: {
    ATooltip: Tooltip,
    WorkflowDesigner: flowDrawer.components.WorkflowDesigner
  }
})
export default class FormWorkflowTrackChart extends Vue {
  @Prop({ default: {} }) chart!: workflow.Chart;

  @Prop() workflowStatus?: string;

  /**
   * 获取流程节点状态
   */
  get flowNodeStatus() {
    const flowStatus: any = [];
    if (this.chart.activityStatus) {
      this.chart.activityStatus.forEach((activity: any) => {
        let status = '';
        switch (activity.status) {
          case 0:
            status = 'finish';
            break;
          case 1:
            status = 'processing';
            break;
          case 2:
            status = 'wrong';
            break;
          default:
            break;
        }
        flowStatus.push({ activityCode: activity.activityCode, status });
      });
    }
    return flowStatus;
  }

  // 图形高度
  get chartHeight() {
    let height: number = 0;
    if (this.chart.activities) {
      this.chart.activities.forEach((activity: any) => {
        const activityPosition: number = activity.height + activity.y;
        height = height > activityPosition ? height : activityPosition;
      });
    }
    return height + 120;
  }

  // 获取图像宽度
  get chartWidth() {
    let width: number = 0;
    if (this.chart.activities) {
      this.chart.activities.forEach((activity: any) => {
        const activityPosition: number = activity.width + activity.x;
        width = width > activityPosition ? width : activityPosition;
      });
    }
    return width + 120;
  }

  showFullScreen:boolean = false;

  /* 
  * 全屏
  */
 fullScreen() {
   this.showFullScreen = true;
 }

 /* 
 * 小屏
 */
restoreScreen() {
  this.showFullScreen = false;
}

  /**
   * 事件回调
   */
  clickActivity(activity: any, e: Event) {
    this.$emit('clickActivity', activity, e);
  }
}
</script>
<style lang="less">
// @import "../../../../styles/themes/default";
@finish-bg-color: rgba(0, 255, 156, 0.1);
@finish-hover-bg-color: rgba(0, 255, 156, 0.15);
@finish-border-color: rgba(23, 188, 148, 0.5);
@finish-hover-border-color: rgba(50, 182, 131, 1);

@process-bg-color: rgba(41, 112, 255, 0.1);
@process-hover-bg-color: rgba(41, 112, 255, 0.15);
@process-border-color: rgba(41, 112, 255, 0.5);
@process-hover-border-color: rgba(41, 112, 255, 1);

@wrong-bg-color: rgba(244, 69, 78, 0.1);
@wrong-hover-bg-color: rgba(244, 69, 78, 0.15);
@wrong-border-color: rgba(244, 69, 78, 0.5);
@wrong-hover-border-color: rgba(207, 48, 61, 1);

@default-font-color: rgba(0, 0, 0, 0.85);
@default-hover-bg-color: rgba(102, 102, 102, 0.15);
@default-border-color: rgba(153, 153, 153, 1);
@default-hover-border-color: rgba(102, 102, 102, 1);

.flow-track-chart {
  position: relative;
  overflow: hidden;
  &__drawer {
    padding: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: move;
  }
  .workflow-designer {
    margin: 0;
    min-width: 100%;
    .activity-instance {
      color: @default-font-color;
      border-color: @default-border-color;
    }
    .activity-instance:hover {
      border-color: @default-hover-border-color;
      background-color: @default-hover-bg-color;
    }
    .finish {
      // border-radius: 2px;
      background: @finish-bg-color;
      border-color: @finish-border-color !important;
      &:hover {
        background: @finish-hover-bg-color;
        border-color: @finish-hover-border-color !important;
      }
      i {
        color: @finish-hover-border-color;
      }
    }
    .wrong {
      background: @wrong-bg-color;
      border-color: @wrong-border-color !important;
      &:hover {
        background: @wrong-hover-bg-color;
        border-color: @wrong-hover-border-color !important;
      }
      i {
        color: @wrong-hover-border-color;
      }
    }
    .processing {
      // border-radius: 2px;
      background: @process-bg-color;
      border-color: @process-border-color !important;
      &:hover {
        background: @process-hover-bg-color;
        border-color: @process-hover-border-color !important;
      }
      i {
        color: @process-hover-border-color;
      }
    }
  }

  &__fullscreen{
    position: absolute;
    top: 0;
    right: 10px;
    cursor: pointer;
  }

  &__explain {
    position: absolute;
    top: 0;
    left: 10px;
    width: 200px;
  }
  &__explain-item {
    display: flex;
    align-items: center;
    margin-bottom: @base4-padding-xs;
    i {
      flex: 0 0 14px;
      height: 14px;
      margin-right: @base4-padding-md;
      border-radius: @border-radius-lg;
    }
    span {
      flex: 1 1;
      font-size: @font-size-14;
      color: @light-color-2;
    }
  }
  &__finish {
    background-color: @finish-bg-color;
    border: 1px solid @finish-border-color !important;
  }
  &__wrong {
    background-color: @wrong-bg-color;
    border: 1px solid @wrong-border-color !important;
  }
  &__processing {
    background-color: @process-bg-color;
    border: 1px solid @process-border-color !important;
  }
  &__default {
    border: 1px solid @default-border-color !important;
  }

  .chart__fullscreen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #fff;
    .fullscreen__head{
      height: 64px;
      line-height: 64px;
      padding: 0 24px;
      &-left{
        float: left;
        font-size: 18px;
        font-weight: 600;
        color: rgba(0,0,0,0.85);
      }
      &-right{
        float: right;
        margin-right: 8px;
        cursor: pointer;
      }
    }
    .fullscreen__content{
      padding: 30px;
      height: calc(100% - 74px);
      width: 100%;
      overflow: auto;
      cursor: move;
    }
  }
}
</style>
